<template>
  <div id="user">
    <!-- 信息 -->
    <van-cell class="info" :title="user.username" is-link>
      <template #label>
        <span class="userInfo">{{ user.isVIP === 0 ? "开通VIP" : "VIP" }}</span>
        <span class="userInfo">LV{{ user.level }}</span>
        <span class="userInfo">累计听歌{{ user.listenSongs }}首</span>
      </template>
      <template #icon>
        <van-image round :src="user.avatar" />
      </template>
    </van-cell>
    <!-- 应用 -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item icon="music" text="本地" />
      <van-grid-item icon="fire" text="云盘" />
      <van-grid-item icon="bag" text="已购" />
      <van-grid-item icon="play-circle" text="最近播放" />
      <van-grid-item icon="friends" text="我的好友" />
      <van-grid-item icon="star" text="收藏" />
      <van-grid-item icon="thumb-circle" text="博客" />
      <van-grid-item icon="ellipsis" text="应用" />
    </van-grid>
    <!-- 歌单 -->
    <van-cell-group class="songList" inset>
      <van-cell title="~" label="230首歌">
        <template #right-icon>
          <van-icon name="ellipsis" />
        </template>
        <template #icon>
          <van-image
            width="50"
            height="50"
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'User',
  data () {
    return {}
  },

  created () {},
  computed: {
    ...mapGetters(['user'])
  },
  // 定义方法
  methods: {}
}
</script>

<style scoped lang="less">
#user {
  background-color: #f3f5f7;
  height: 100%;

  .info {
    text-align: left;
    background-color: transparent;
    padding: 10px 20px;
    .userInfo {
      display: inline-block;
      padding: 3px 12px;
      color: #0c0c0c;
      border: 1px solid #ccc;
      border-radius: 15px;
      margin-right: 5px;
    }
    .van-image {
      width: 50px;
      height: 50px;
      margin-right: 20px;
    }
  }

  .van-grid {
    margin: 20px;
    border-radius: 10px;
    overflow: hidden;
    .van-grid-item {
      color: rgb(255, 77, 7);
    }
  }
  .songList {
    text-align: left;
    .van-image {
      margin-right: 10px;
    }
  }
}
</style>
